<template>
    <path ref="path" :style="{ 'animation-delay': delayTime + 's' }"
        :d="`M${Start[0]} ${Start[1]} S${Control[0]} ${Control[1]} ${End[0]} ${End[1]}`" />

</template>
<script setup>
import { ref } from 'vue';
import { computePosition, ControlPointCompute } from './Uint.js'
const props = defineProps({
    data: Object,
    count: Number
})
var delayTime = Math.random();
var { Form, To } = computePosition(props.data.linkTo, props.data.i, props.count);
const Start = ref(Form);
const End = ref(To);
const Control = ref(ControlPointCompute(Form, To));

</script>
<style lang="less" scoped>
path {
    stroke: rgba(255, 0, 0, 0.5);
    stroke-width: 3;
    fill: none;
    stroke-width: 4;
    stroke-dasharray: 500, 500;
    animation: dash linear infinite 3s;
}

@keyframes dash {
    to {
        stroke-dashoffset: -1000;
    }
}
</style>